<template>
    <el-container class="comment-view panel-block">
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          
         
        </div>
      </el-header>
      <el-main class="sa-p-0">
        <div class="sa-table-wrap" v-loading="loading">
            <el-table
                height="400px"
                class="sa-table"
                :data="table.data"
                row-key="id"
                stripe
            >
            <template #empty>
                <sa-empty></sa-empty>
            </template>
            
            <el-table-column  prop="id" label="申请编号 " min-width="100"></el-table-column>
          
          <el-table-column prop="type_txt" label="用户头像" min-width="120">
            <template #default="scope">
              <sa-image :url="scope.row.user?.avatar" size="24"></sa-image>
            </template>
          </el-table-column>
          <el-table-column prop="machine_goods_code" label="用户昵称" min-width="120" />
           
            <el-table-column prop="name" label="手机号" min-width="170"></el-table-column>
            <el-table-column prop="paid_price" label="任务类型 " min-width="120"></el-table-column>
            <el-table-column prop="crowd_status_txt" label="发布平台" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="发布平台账号" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="预计收入" min-width="120"></el-table-column>
            <el-table-column prop="statu _txt" label="视频地址 " min-width="120">
              <template #default="scope">
                <el-button
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="generate(scope.row)"
                  >链接
                  </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="status_txt" label="播放数" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="点赞数" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="分享数" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="评论数" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="审核状态" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="发布时间" min-width="120"></el-table-column>
            
            
       
        </el-table>
        </div>
      </el-main>
      <sa-view-bar>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  <script setup>
    import { onMounted, reactive, ref } from 'vue';
    import { api } from '../task.service';
    import {  useSearch, usePagination } from '@/sheep/hooks';
    import { composeFilter } from '@/sheep/utils';
    const emit = defineEmits(['modalCallBack']);
    const props = defineProps({
        modal: {
        type: Object,
        },
    });
  
    const { pageData } = usePagination();
    const loading = ref(false);
  
    const table = reactive({
      data: [],
    });
  
    const filterParams = reactive({
      tools: {
        user: {
          type: 'tinputprepend',
          placeholder: '请输入查询内容',
          field: 'user',
          user: {
            field: 'store.name',
            value: '',
          },
          options: [
            {
              label: '用户昵称',
              value: 'store.name',
            },
            {
              label: '店铺地址',
              value: 'address',
            },
            {
              label: '用户ID',
              value: 'store.id',
            }
          ],
        },
        mobile: {
          type: 'tinput',
          label: '联系电话',
          field: 'mobile',
          value: '',
          options: {
            data: [
              {
                label: '本地生活商家',
                value: 1,
              },
              {
                label: '电商品牌商家',
                value: 2,
              },
  
            ],
          },
        },
        status: {
          type: 'tselect',
          label: '启用状态',
          field: 'status',
          value: '',
          options: {
            data: [
              {
                label: '正常',
                value: 'normal',
              },
              {
                label: '停业',
                value: 'close',
              },
              {
                label: '关闭',
                value: 'disabled',
              },
            ],
          },
        },
      },
      data: {
        status: '',
        mobile: '',
        user: { field: 'store.name', value: '' },
      },
      conditionLabel: {},
    });
  
    const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  
    onMounted(() => {
      getData();
    });
  
    // 二维码
    const generate = async (row) => {
        const {error,data} = await api.qrcode(row.id)
        if (error === 0) {
        window.open(data.qrcode);
        }
    }
 
    
  
   
  
    // 获取列表数据
   async function getData (page) {
      loading.value = true;
      if (page) pageData.page = page;
     let tempSearch = _.cloneDeep(filterParams.data);
     let search = composeFilter(tempSearch, {
       'store.name': 'like',
       'store.id': 'like',
       'address': 'like',
       mobile: 'like',
     });
     console.log(search)
      // const { error, data } = await api.business.list({
      //   page: pageData.page,
      //   list_rows: pageData.list_rows,
      //   ...search
      // });
      // if (error === 0) {
      //   pageData.page = data.current_page;
      //   pageData.list_rows = data.per_page;
      //   pageData.total = data.total;
      //   table.data = data.data;
      // }
      loading.value = false;

    };
  
   
  </script>
  <style lang="scss" scoped>
    
  
    .color-red {
      color: #F56C6C;
    }
  
  </style>
  